<script setup lang="ts">
import {ref} from "vue";
import citySelect from "@/components/citySelect/u-city-select.vue";
import type {AddressAddParamsType, AddressInfoType} from "@/types/address";
import {onLoad} from "@dcloudio/uni-app";
import api from "@/api";
const showCitySelect = ref(false);
const showRegioPicker = () => {
  showCitySelect.value = true;
};
const cityChange = (cityarr: any) => {
  const {province, city, area} = cityarr;
  formData.value.city_text = `${province.label}${city.label}${area.label}`;
  formData.value.city = [province.value, city.value, area.value];
}
const addressId = ref<number|null>(null);
const formData = ref<AddressAddParamsType & {city_text:string}>({
  city_text: '',
  consignee: '',
  mobile: '',
  city: [],
  address: '',
  is_default: 0,
})

const getAddressDetail =async (id:number) => {
  await api.address.detailApi({id}).then( (res:ApiResponse<AddressInfoType>) => {
    formData.value = {
      city_text: res.data.city_text,
      consignee: res.data.consignee,
      mobile: res.data.mobile,
      city: res.data.city,
      address: res.data.address,
      is_default: res.data.is_default,
    }
  })
}

const setDefault = (e) => {
  formData.value.is_default = e.detail.value ? 1 : 0;
}

// 验证手机号
const validatePhone = (phone: string): boolean => {
  return /^1[3-9]\d{9}$/.test(phone);
};

const submit = async () => {
  const {consignee, mobile, city, address, is_default} = formData.value;
  console.log('submit', formData.value);
  if (!consignee.trim()) {
    uni.showToast({ title: "请填写收货人姓名", icon: "none" });
    return;
  }
  if (!validatePhone(mobile)) {
    uni.showToast({ title: "请填写正确的手机号码", icon: "none" });
    return;
  }
  if (city.length!==3) {
    uni.showToast({ title: "请选择所在地区", icon: "none" });
    return;
  }
  if (!address.trim()) {
    uni.showToast({ title: "请填写详细地址", icon: "none" });
    return;
  }
  let res=null;
  if (addressId.value) {
    res = await api.address.editApi({
      id: addressId.value,
      consignee,
      mobile,
      city,
      address,
      is_default,
    })
  }else{
    res = await api.address.addApi({
      consignee,
      mobile,
      city,
      address,
      is_default,
    })
  }
  console.log('submit', res);
  if (res.code === 1) {
    // 返回上一页
    uni.navigateBack();
  }
}

const onAddressDel = async () => {
  await api.address.delApi({id: addressId.value as number}).then(() => {
    uni.navigateBack();
  })
}

onLoad((options?: { id?: number }) => {
  if (options?.id) {
    addressId.value = options.id;
    getAddressDetail(options.id);
  }
});


</script>

<template>
  <view class="wrap">
    <view class="top">
      <view class="item">
        <view class="left">收货人</view>
        <input type="text" v-model="formData.consignee" placeholder-class="line" placeholder="请填写收货人姓名" />
      </view>
      <view class="item">
        <view class="left">手机号码</view>
        <input type="text" v-model="formData.mobile" placeholder-class="line" placeholder="请填写收货人手机号" />
      </view>
      <view class="item" @tap="showRegioPicker">
        <view class="left">所在地区</view>
        <input disabled type="text" v-model="formData.city_text" placeholder-class="line" placeholder="省市区县、乡镇等" />
      </view>
      <view class="item address">
        <view class="left">详细地址</view>
        <textarea type="text" v-model="formData.address" placeholder-class="line" placeholder="街道、楼牌等" />
      </view>
    </view>
    <view class="bottom">
      <view class="default">
        <view class="left">
          <view class="set">设置默认地址</view>
          <view class="tips">提醒：每次下单会默认推荐该地址</view>
        </view>
        <view class="right">
          <switch color="#f9ae3d" :checked="formData.is_default===1" @change="setDefault"/>
        </view>
      </view>
    </view>

    <city-select v-model="showCitySelect" @city-change="cityChange"></city-select>

    <view class="footer">
      <up-button @click="submit" type="warning" shape="circle">保存</up-button>

      <up-button v-if="addressId" style="margin-top: 20rpx" @click="onAddressDel" type="warning" shape="circle" plain=true>删除</up-button>
    </view>


  </view>
</template>

<style lang="scss" scoped>
:v-deep(.line) {
  color: $u-light-color;
  font-size: 28rpx;
}
.wrap {
  background-color: #f2f2f2;
  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;
    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;
      .left {
        width: 180rpx;
      }
      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }
    .site-clipboard {
      padding-right: 40rpx;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;
        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 28rpx;
    .tag {
      display: flex;
      .left {
        width: 160rpx;
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        .tags {
          width: 140rpx;
          padding: 16rpx 8rpx;
          border: solid 2rpx $u-border-color;
          text-align: center;
          border-radius: 50rpx;
          margin: 0 10rpx 20rpx;
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: center;
          color: $u-content-color;
          line-height: 1;
        }
        .plus {
          //padding: 10rpx 0;
        }
      }
    }
    .default {
      //margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;
      .tips {
        font-size: 24rpx;
      }
      .right {
      }
    }
  }
  .footer {
    margin-top: 50rpx;
    padding: 20rpx 60rpx;
  }
}
</style>